Json 编辑工具 vue-json-pretty
概述
在菜单管理等开发调试场景中，使用 vue-json-pretty 可以结构化地展示 JSON 数据，比嵌套 Form 表单更适合开发人员查看完整的数据结构。本节介绍如何在项目中集成和使用 vue-json-pretty。
vue-json-pretty 简介
| 特性 | 说明 |
|---|---|
| 功能 | 结构化展示 JSON 数据，支持折叠、高亮、编辑 |
| Vue 版本 | Vue 3 使用 vue-json-pretty@2，Vue 2 使用 vue-json-pretty@1 |
| 样式 | 需要单独导入 CSS |
| 适用 | 数据调试、配置查看、API 响应展示 |
安装
# Vue 3 项目
npm install vue-json-pretty@2
# Vue 2 项目
npm install vue-json-pretty@1
bash
注意：版本号与 Vue 版本对应，Vue 3 必须安装
@2版本。
基础使用
组件封装
<!-- components/json/JsonPreview.vue -->
<template>
<div class="json-preview">
<VueJsonPretty
:data="data"
:deep="deep"
:show-length="showLength"
:show-double-quotes="true"
:show-line="showLine"
:highlight-selected-node="true"
/>
</div>
</template>
<script lang="ts" setup>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
interface JsonPreviewProps {
data: Record<string, any> | any[]
deep?: number
showLength?: boolean
showLine?: boolean
}
withDefaults(defineProps<JsonPreviewProps>(), {
deep: 3,
showLength: true,
showLine: false
})
</script>
<style scoped>
.json-preview {
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 13px;
}
</style>
vue
在菜单管理中使用
<template>
<div class="menu-management">
<!-- 左侧：树形菜单 -->
<div class="menu-tree">
<el-tree :data="menuData" @node-click="handleNodeClick" />
</div>
<!-- 右侧：JSON 预览 -->
<div class="menu-detail">
<JsonPreview v-if="selectedData" :data="selectedData" :deep="4" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import JsonPreview from '@/components/json/JsonPreview.vue'
const selectedData = ref<Record<string, any> | null>(null)
function handleNodeClick(data: any) {
selectedData.value = data
}
</script>
vue
核心 Props
| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Object/Array | — | JSON 数据（必填） |
deep | number | Infinity | 默认展开层级 |
showLength | boolean | false | 显示数组/对象的元素数量 |
showDoubleQuotes | boolean | true | key 使用双引号 |
showLine | boolean | false | 显示行号 |
highlightSelectedNode | boolean | false | 高亮选中节点 |
selectableType | string | — | 选中类型：single / multiple |
path | string | root | 根路径名称 |
editable | boolean | false | 是否可编辑 |
editableTrigger | string | click | 编辑触发方式 |
样式全局导入
避免每次使用都导入 CSS，可以在入口文件中全局导入：
// main.ts
import 'vue-json-pretty/lib/styles.css'
typescript
或通过 Vite 插件自动导入。
vue-json-pretty vs 手写 JSON 展示
| 维度 | vue-json-pretty | 手写 JSON.stringify |
|---|---|---|
| 可读性 | 高（折叠、高亮） | 低（纯文本） |
| 交互性 | 支持折叠/展开 | 无 |
| 包体积 | ~30KB | 0 |
| 性能 | 大数据时较慢 | 快 |
实践要点
- Vue 3 项目必须安装
vue-json-pretty@2，注意版本号 - CSS 需要单独导入，推荐在
main.ts中全局导入避免重复 deep属性控制默认展开层级，避免大数据量时一次性渲染过多节点- 适合开发调试场景展示完整数据结构，比 Form 表单更适合查看 JSON 数据
- 大数据量场景需注意性能，可通过
deep限制展开层级
↑